<template>
  <view class="header">

    <!-- 多级弹出导航菜单 -->
    <view v-if="showMenu" class="nav-menu-mask" @click="showMenu = false">
      <view class="nav-menu" @click.stop>
        <view class="nav-menu-close" @click="showMenu = false">×</view>
        <view class="nav-grid">
          <view
            v-for="(item, index) in menus"
            :key="index"
            class="nav-grid-item"
            @click="cGo(item)"
          >
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>


			<view class="rf-search-bar" :style="[{'color': titleTintColor}, bgColor]">
				<view
					class="header"
					:style="{width:merchantShow ? '100vw' : width+'px', paddingTop: merchantShow ? 0 : inputTop+'px'}"
				>
					<view class="uni_topbar" :style="style">
							<view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px','color': titleTintColor}, bgColor]">
									<!-- 返回 -->
									<!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
									<view v-if="isBack" @tap="goBack" style="position:absolute;left:15px">
											<slot name="back"></slot>111
									</view>
									<slot name="headerL"></slot>
									<!-- 标题 -->
									<!-- #ifndef MP -->
									<view class="flex1" v-if="!search && center"></view>
									<!-- #endif -->
									<view class="uni_title flex1" style="text-align: center;" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
											{{title}}
									</view>
									<view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
											<input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
									</view>
									<!-- 右侧 -->
									<view class="uni_headerRight flexbox flex_row flex_alignc" style="position:absolute;right:15px">
										 <view class="header-menu" @click="showMenu = true">
										        <view class="menu-bar"></view>
										        <view class="menu-bar"></view>
										        <view class="menu-bar"></view>
										      </view>
									</view>
							</view>
					</view>
				</view>
			</view>

  </view>
</template>

<script>
	import { indexList} from '@/api/product';
export default {
  name: 'HeaderNav',
  data() {
    return {

			merchantShow:0,
			  statusBarH: this.StatusBar,
			  customBarH: this.CustomBar,
				CustomBar: this.CustomBar,
				searchValue: this.placeholder,
				appLogo: this.$mSettingConfig.appLogo,
				isOpenScan: this.$mSettingConfig.isOpenScan,
				isOpenIndexCate: this.$mSettingConfig.isOpenIndexCate,
				height: 0,
				width: 0,
				inputTop: 0,
				tabCurrentIndex: 0,

      menus: [
      ],
      showMenu: false,
      openMenuIndex: null,
      openSubMenuIndex: null,
      searchValue: '',
      showCharPicker: false,
      showImagePicker: false,
      specialChars: [
        'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'κ', 'μ', 'ω', 'σ', 'τ', 'λ',
        'Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ', 'Ⅹ', 'Ⅺ',
        'Ⅻ', 'X Ⅲ', 'X Ⅳ', 'X Ⅴ', 'X Ⅵ', 'X Ⅶ', 'X Ⅷ'
      ],
      imageList: [
        { src: '/static/images/pic1.png', name: '图片1' },
        { src: '/static/images/pic2.png', name: '图片2' },
        { src: '/static/images/pic3.png', name: '图片3' }
      ]
    }
  },
	watch: {
			  // 监听对象具体的属性， deep就不需要设置为true了
			        statusBarH: {
			         handler (newName, oldName) {
								 console.log(newName)
												this.statusBarH = newName;
			            }
			        }

	},
	props: {
	    isBack: { type: [Boolean, String], default: true },
	    title: { type: String, default: '' },
	    titleTintColor: { type: String, default: '#fff' },
	    bgColor: Object,
	    center: { type: [Boolean, String], default: false },
	    search: { type: [Boolean, String], default: false },
	    searchRadius: { type: [Boolean, String], default: false },
	    fixed: { type: [Boolean, String], default: false },

	},
	computed: {
	    style() {
	        let _style = `height: ${this.customBarH}px;`
	        return _style
	    }
	},
	mounted(options) {
	   this.getIndexConfig()
	},
	created() {
		let obj = {};
		// #ifdef MP-WEIXIN
		// eslint-disable-next-line
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		uni.getSystemInfo({
			success: (res) => {
				this.width = obj.left || res.windowWidth;
				this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
				this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight );
			}
		});
	},
  methods: {
		goBack() {
		    uni.navigateBack()
		},
		cGo(item) {
					const link = item.link || item.url;
					if (!link) return;
					try {
						// 标准化路径格式（去除前导/和查询参数）
						const normalizedLink = link.replace(/^\//, '').split('?')[0];

						// tabBar页面列表 - 从实际的pages.json同步更新
						const tabBarPages = [
							'pages/index/index',
							'pages/profile/profile'
						];

						// 判断是否为tabBar页面
						const isTabBarPage = tabBarPages.includes(normalizedLink);
						if (isTabBarPage) {

							console.log(1111)

							uni.switchTab({
								url: `/${normalizedLink}`,
								fail: (err) => {
									console.error('switchTab failed:', err);
									// 如果switchTab失败，回退到普通导航
									uni.navigateTo({ url: link });
								}
							});
						} else {
							uni.navigateTo({
								url: link,
								fail: (err) => {
									console.error('navigateTo failed:', err);
								}
							});
						}
					} catch (error) {
						console.error('Navigation error:', error);
						// 发生错误时尝试普通导航
						uni.navigateTo({ url: link });
					}
				},
		// 获取商品列表
		async getIndexConfig(type) {
			await this.$http
				.get(`${indexList}`, {})
				.then(async r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
			     this.menus = r.data.menus;;
				})
				.catch(err => {
					this.errorInfo = err;
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
    toggleMenu(i) {
      if (this.openMenuIndex === i) {
        this.openMenuIndex = null;
        this.openSubMenuIndex = null;
      } else {
        this.openMenuIndex = i;
        this.openSubMenuIndex = null;
      }
    },
    toggleSubMenu(j) {
      if (this.openSubMenuIndex === j) {
        this.openSubMenuIndex = null;
      } else {
        this.openSubMenuIndex = j;
      }
    },
    onMenuClick(name) {
      this.showMenu = false;
      this.openMenuIndex = null;
      this.openSubMenuIndex = null;
      this.$emit('menu-click', name);
    },
    insertImageName(name) {
      this.searchValue += name;
    },
    insertChar(char) {
      this.searchValue += char;
    },
    onInputBlur() {
      setTimeout(() => {
        this.showCharPicker = false;
      }, 100);
    },
    onSearch() {
      const keyword = this.searchValue.trim();
      console.log(keyword);
      if (keyword) {
        const url = `/pages/product/list?keyword=${encodeURIComponent(keyword)}`;
        uni.navigateTo({
            url: url
        });

      }
    }
  }
}
</script>

<style lang="scss" scoped>

	.uni_topbar{}
	.flexbox{display:flex;padding:10px}
	.flex1{flex:1}
	.uni_headerRight {padding:0}



.home {
  /* background: #fff0f0;  */
  min-height: 100vh; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
.header { background: #fff; padding-bottom: 0; }
.header-bar { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; }
.header-logo { height: 56px; }
.header-menu { width: 56rpx; height: 56rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.menu-bar { width: 36rpx; height: 5rpx; background: #e53935; margin: 4rpx 0; border-radius: 3rpx; }
.search-row { display: flex; align-items: center; padding: 18rpx 10rpx; background: #fff; border-radius: 16rpx; margin: 20rpx 24rpx 0 24rpx; }
.search-category-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}
/* search-category-select-wrapper 边框 */
.search-category-select-wrapper {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-category {
  background: #fff0f0;
  border-radius: 10rpx;
  padding: 0 38rpx 0 28rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #222;
  font-weight: normal;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.select-arrow {
  position: absolute;
  right: 18rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 22rpx;
  color: #888;
}
.search-input { flex: 1; height: 66rpx; border: none; background: #fff8f8;
   border-radius: 10rpx; padding: 0 18rpx; font-size: 30rpx; margin-right: 14rpx; color: #222; }
/* search-input 边框 */
.search-input {
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}
.search-input {
  /* 保证输入内容和placeholder都垂直居中 */
  display: flex;
  align-items: center;
}
/* 针对uni-app/微信小程序等环境，若需兼容placeholder垂直居中，可加： */
.search-input::-webkit-input-placeholder {
  line-height: 66rpx;
}
.search-input:-moz-placeholder {
  line-height: 66rpx;
}
.search-input::-moz-placeholder {
  line-height: 66rpx;
}
.search-input:-ms-input-placeholder {
  line-height: 66rpx;
}
.search-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  height: 66rpx;
  width: 80rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;
}
.search-icon {
  display: block;
  margin: 0 auto;
}

.section { margin: 32rpx 0; background: #fff; border-radius: 18rpx; padding: 32rpx 24rpx; }
.section-title-row {
  display: flex;
  align-items: flex-end;
  gap: 18rpx;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #e53935;
  letter-spacing: 1rpx;
  margin-bottom: 0;
  line-height: 1;
}
.section-subtitle {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 0;
  align-self: flex-end;
  line-height: 1;
  padding-bottom: 2rpx; /* 你可以微调这个值，比如2rpx、3rpx、4rpx，看哪个最齐 */
}

.product-item {
  flex: 0 0 calc(50% - 18rpx);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff8f8;
  border-radius: 14rpx;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 32rpx;
}


.product-item:active { transform: scale(1.03); }
.product-img { width: 180rpx; height: 120rpx; border-radius: 10rpx; margin-bottom: 10rpx; object-fit: cover; }
.product-name { text-align: center; font-size: 28rpx; color: #222; font-weight: 500; }
.news-tabs { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.news-tab { padding: 10rpx 32rpx; border-radius: 32rpx; background: #fff0f0; color: #222; font-size: 28rpx; font-weight: 500; transition: background 0.2s, color 0.2s; }
.news-tab.active { background: #e53935; color: #fff; }
.news-list { }
.news-item { display: flex; flex-direction: column; padding: 16rpx 0; border-bottom: 1px solid #f5c6c6; }
.news-title { font-size: 30rpx; font-weight: 500; color: #222; }
.news-date { color: #666; font-size: 24rpx; }
.feature-tabs { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.feature-tab { padding: 10rpx 40rpx; border-radius: 12rpx 12rpx 0 0; background: #fff0f0; color: #222; font-size: 30rpx; font-weight: 500; }
.feature-tab.active { background: #e53935; color: #fff; }
.feature-content { }
.feature-box { background: linear-gradient(90deg, #fff0f0 60%, #fff 100%); border-radius: 12rpx; padding: 28rpx; margin-bottom: 28rpx; }
.feature-box-title { font-size: 30rpx; font-weight: bold; margin-bottom: 14rpx; color: #e53935; }
.feature-box-list { color: #fff; background: #222; border-radius: 10rpx; padding: 18rpx; margin-bottom: 10rpx; font-size: 26rpx; }
.feature-box-link { color: #222; text-align: right; font-size: 28rpx; margin-top: 10rpx; }
.feature-card { background: #fff; border-radius: 12rpx; margin-bottom: 18rpx; padding: 18rpx; transition: box-shadow 0.2s; }
.feature-card:active { }
.feature-card-header { display: flex; align-items: center; gap: 14rpx; }
.feature-card-logo { font-size: 30rpx; color: #e53935; font-weight: bold; }
.feature-card-title { font-size: 30rpx; font-weight: bold; color: #e53935; }
.feature-card-img { width: 100%; height: 130rpx; border-radius: 10rpx; margin: 14rpx 0; object-fit: cover; }
.feature-card-list { font-size: 26rpx; color: #333; margin-bottom: 10rpx; }
.feature-card-btn { background: #222; color: #fff; border: none; border-radius: 10rpx; padding: 10rpx 36rpx; font-size: 28rpx; }
.footer { background: #fff; border-radius: 18rpx 18rpx 0 0; margin-top: 40rpx; padding: 32rpx 0 0 0; }
.footer-company { color: #666; font-size: 24rpx; text-align: center; margin-bottom: 18rpx; }
.footer-qrcodes { display: flex; justify-content: center; gap: 56rpx; margin-bottom: 18rpx; }
.qrcode-box { display: flex; flex-direction: column; align-items: center; }
.qrcode-img { width: 120rpx; height: 120rpx; border-radius: 10rpx; background: #fff0f0; }
.qrcode-label { font-size: 24rpx; color: #666; margin-top: 6rpx; }
.footer-nav { display: flex; justify-content: space-around; background: #e53935; border-radius: 0 0 18rpx 18rpx; padding: 18rpx 0; }
.footer-nav-item { color: #fff; font-size: 30rpx; font-weight: 500; }
.nav-menu-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.nav-menu {
  width: 100%;
  background: #fff;
  padding: 20rpx;
  border-radius: 0 0 20rpx 20rpx;
  position: relative;
top:100rpx;
  margin-top: 0;
  max-height: 80vh;
  overflow-y: auto;
  transform: none !important;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  background: #fff;
}

.nav-grid-item {
  background: #f5f5f5;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx;

  &:active {
    background: #e0e0e0;
  }

  text {
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.nav-menu-close {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 40rpx;
  color: #999;
  z-index: 1000;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
}
.nav-menu-item {
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-menu-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 48rpx;
  font-size: 32rpx;
  color: #222;
  cursor: pointer;
}
.arrow {
  font-size: 28rpx;
  color: #e53935;
  margin-left: 12rpx;
}
.nav-sub-menu {
  background: #fafafa;
}
.nav-sub-menu-item {
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-third-menu {
  background: #f5f5f5;
}
.nav-third-menu-item {
  padding: 28rpx 72rpx;
  font-size: 28rpx;
  color: #333;
  cursor: pointer;
}
.nav-third-menu-item:active {
  background: #f7f7f7;
}
.product-item:nth-child(2n+1):last-child {
  flex-basis: 100%;
  max-width: 100%;
}
.image-picker {
  display: flex;
  gap: 16rpx;
  background: #fff;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 12rpx;
  margin: 0 24rpx 16rpx 24rpx;
  flex-wrap: wrap;
  align-items: center;
}
.image-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-right: 12rpx;
}
.picker-img {
  width: 48rpx;
  height: 48rpx;
  border-radius: 6rpx;
  margin-bottom: 4rpx;
}
.picker-label {
  font-size: 22rpx;
  color: #333;
}
.picker-close {
  color: #e53935;
  font-size: 26rpx;
  margin-left: 16rpx;
  cursor: pointer;
}
.char-picker-popup {
  position: absolute;
  left: 0;
  right: 0;
  top: 80rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.12);
  z-index: 1000;
  padding: 18rpx 24rpx 12rpx 24rpx;
  margin: 0 0 0 0;
}
.char-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.char-picker-title {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10rpx;
  line-height: 2;
  height: 40cqw;
  display: flex;
  align-items: flex-start;
}
.char-picker-content-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.char-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 4rpx;
  justify-content: space-between;
}
.char-picker-char {
  color: #1976d2;
  font-size: 30rpx;
  cursor: pointer;
  margin-right: 8rpx;
  transition: color 0.2s;
}
.char-picker-char:active {
  color: #e53935;
}
.char-picker-close {
  color: #e53935;
  font-size: 26rpx;
  margin-top: 8rpx;
  text-align: right;
  cursor: pointer;
	}
</style>
